<template>
	<u-tabbar :value="value" @change="toggle" :border="true" :fixed="true" :placeholder="true"
		:safeAreaInsetBottom="true">
		<u-tabbar-item text="首页" icon="home-fill" :name="0">
		</u-tabbar-item>
		<u-tabbar-item text="我的课程" icon="grid-fill" v-if="$userInfo.role != 2" :name="1">
		</u-tabbar-item>
		<u-tabbar-item text="我的教学" icon="calendar-fill" v-if="$userInfo.role == 2" :name="2">
		</u-tabbar-item>
		<u-tabbar-item text="我的" icon="account-fill" :name="3">
		</u-tabbar-item>
	</u-tabbar>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		props: {
			name: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				value: 0,
			}
		},
		computed: {
			// ✅ 正确方式 - 使用计算属性
			...mapState(['$userInfo']),
		},
		methods: {
			toggle(name) {
				switch (name) {
					case 0:
						uni.$u.route({
							url: "/pages/index/index",
							type: "reLaunch"
						})
						break;
					case 1:
						uni.$u.route({
							url: "/pages/myStudy/index",
							type: "reLaunch"
						})

						break;
					case 2:
						uni.$u.route({
							url: "/pages/myClass/index",
							type: "reLaunch"
						})
						break;
					case 3:
						uni.$u.route({
							url: "/pages/user/index",
							type: "reLaunch"
						})
						break;
				}
			}
		},
		created() {
			this.value = this.name;
		},
		mounted() {
			
		},
		onLoad() {

		},
		onLaunch() {

		}
	}
</script>

<style>
</style>